import React from 'react';
import { Button } from 'rmc-kiana-mei';
import { DemoBlock } from 'rmc-kiana-mei/src/demos';

export default () => {
  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: getStyles() }}></style>
      <DemoBlock title="不同效果的按钮">
        <Button color="default">default</Button>
        <Button color="danger">danger</Button>
        <Button color="primary">primary</Button>
        <Button color="success">success</Button>
        <Button color="text">text</Button>
        <Button color="warning">warning</Button>
      </DemoBlock>
      <DemoBlock title="各种大小">
        <Button color="primary" size="sm">
          primary
        </Button>
        <Button color="primary" size="md">
          primary
        </Button>
        <Button color="primary" size="lg">
          primary
        </Button>
      </DemoBlock>
      <DemoBlock title="禁用状态">
        <Button color="primary">可用</Button>
        <Button color="primary" disabled>
          禁用
        </Button>
      </DemoBlock>
      <DemoBlock title="水波纹动画">
        <Button color="default">default</Button>
        <Button color="danger" ripple>
          danger
        </Button>
        <Button color="primary" ripple>
          primary
        </Button>
        <Button color="success" ripple>
          success
        </Button>
        <Button color="text" ripple>
          text
        </Button>
        <Button color="warning" ripple>
          warning
        </Button>
      </DemoBlock>
    </>
  );
};

const getStyles = () => `
    .kiana-mei-button {
        margin-top: .1rem;
        margin-right: .1rem;
        display: inline-block;
    }
`;
